<template>
  <div class="addCoupon">
    <div class="el-header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal" router>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item>新增优惠券页面</el-menu-item>
      </el-menu>
    </div>
    <div class="title">新增优惠券</div>
    <el-form label-width="150px" :model="addForm" :rules="addFormRules" ref="addFormRef">
      <el-form-item label="优惠券名称：" prop="name">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="优惠券金额：" prop="money"> <el-input v-model="addForm.money" type="number"></el-input>元 </el-form-item>
      <el-form-item label="使用金额限制：" prop="restrict"> <el-input v-model="addForm.restrict" type="number"></el-input>元 （不填写即为无使用金额限制） </el-form-item>
      <el-form-item label="使用时限：" prop="time_limit"> <el-input v-model="addForm.time_limit" type="number"></el-input>天 （不填写即为无使用时限） </el-form-item>
      <el-form-item label="帐号领取上限：" prop="get_limit"> <el-input v-model="addForm.get_limit" type="number"></el-input>张 （不填写即不限制领取数量） </el-form-item>
      <el-button type="primary" class="submit" @click="add">提交</el-button>
      <el-button @click="$router.push('/general-couppon')">返回优惠券列表</el-button>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'AddCoupon',
  props: [''],
  data () {
    return {
      addForm: {
        name: '',
        money: '',
        restrict: '无',
        time_limit: '无',
        get_limit: '无'
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入优惠券金额', trigger: 'blur' }
        ]
      },
      couponList: []
    }
  },

  components: {},

  computed: {},

  beforeMount () { },

  mounted () { },

  created () {
    this.getCouponList()
  },

  methods: {
    // 获取数据列表
    async getCouponList () {
      const { data } = await this.$http.get('/general_discount_coupon')
      // console.log(data)
      this.couponList = data
      // console.log(this.couponList)
    },
    // 添加优惠券
    async add () {
      // 预校验
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) {
          return this.$message.error('请填写全部必填项')
        }
        // this.couponList.push(this.addForm)
        // console.log(this.addForm)
        await this.$http.post('/general_discount_coupon', this.addForm)
        // console.log(data)
        this.$message.success('添加优惠券成功')
        // console.log(this.addForm)
        // console.log(this.couponList)
      })
    }
  },

  watch: {}

}

</script>
<style lang='less' scoped>
.addCoupon {
  width: 100%;
  .el-header {
    color: #333;
    height: 70px !important;
    padding: 0;
    width: 100%;
    .el-row {
      margin-top: 32px;
      padding-left: 20px;
    }
    .el-button {
      margin-left: 0;
    }
  }
  .el-main {
    padding-left: 40px;
    color: #333;
    text-align: center;
  }
}
.title {
  margin: 20px;
}
.el-form {
  width: 900px;
  .el-input {
    width: 200px;
    margin-right: 5px;
  }
}
/deep/.el-form-item__content {
  width: 600px;
}
.submit {
  width: 140px;
  margin-left: 80px;
  margin-right: 60px;
}
</style>
